<template>
    <div class="breadcrumb">
        <div class="breadcrumb-content">
            <span class="breadcrumb-item" v-for="(item, index) in nameList" :key="index" >
                <router-link class="breadcrumb-link" :to="urlList[index]" v-text="item"></router-link>
            </span>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                nameList:['首页'],
                urlList:['/']
            }
        },
        methods:{
            getList(path){
                this.nameList = ['首页'];
                this.urlList = ['/'];
                let pathList = path.split('/');
                pathList.forEach((value,index,arr)=>{
                    this.urlList.push(arr.slice(1,index+1).join('/'));
                    switch (value){
                        case 'projectBuild':
                            this.nameList.push('项目建立');
                            break;
                        case 'projectUpdate':
                            this.nameList.push('项目修改');
                            break;
                        case 'projectTraceSignIn':
                            this.nameList.push('现场签到');
                            break;
                        case 'projectTraceInvite':
                            this.nameList.push('邀约统计');
                            break;
                        case 'projectTraceJoin':
                            this.nameList.push('参面统计');
                            break;
                        case 'projectTraceOfferIn':
                            this.nameList.push('已入职');
                            break;
                        case 'projectTraceOfferOut':
                            this.nameList.push('未入职');
                            break;
                        case 'dataImport':
                            this.nameList.push('数据导入');
                            break;
                        case 'dataCheck':
                            this.nameList.push('数据查重');
                            break;
                        case 'dataReplace':
                            this.nameList.push('数据代替');
                            break;
                        case 'rightsManagementDate':
                            this.nameList.push('所属项目排期');
                            break;
                        case 'rightsManagementSpecial':
                            this.nameList.push('特殊项目简历留存');
                            break;
                    }
                });
                this.pathList = pathList;
            }
        },
        created(){
            this.getList(this.$route.path);
            this.$router.afterEach((to, from, next) => {
                console.log(to.path);
                this.getList(to.path);
            })
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    .breadcrumb
        .breadcrumb-content
            height: 50px
            line-height: 50px
            background-color: #D3DCE6
            margin-left: -10px
            padding-left: 20px
            .breadcrumb-item
                &::after
                    content:'　/　'
                &:last-of-type
                    &::after
                        content:""
                .breadcrumb-link
                    color #1F2D3D
                    &:hover
                        color #8492A6
</style>